<template>
	<view class="bg-gray">
		<view class="bg-white ruzhiinfo width commonbg">
			<view class="flex-row-between boxitem">
				用餐时间
				<view @click="showPicker = true">
				  {{chooseTime}}
				  <u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="boxitem">
				特殊餐饮需求
				<view class="liuyan">
					<u-input
					    type='textarea'
						placeholder="请输入留言"
						class="mobile"
						v-model="appDesc"
					/>
				</view>
			</view>
		</view>
		<view class="bg-white ruzhiinfo width commonbg">
			<view class="flex-row-between boxitem">
				联系人
				<input class="uni-input" v-model='contacts' placeholder="请输入" />
			</view>
			<view class="flex-row-between boxitem">
				联系电话
				<input class="uni-input" v-model='phone' placeholder="请输入" />
			</view>
		</view>
		<view class="width apply">
			<u-button type="primary" shape='circle' @click="submit">发起申请</u-button>
		</view>
		<u-picker
			 v-model="showPicker"
			 mode="time" 
			 :value="timeValue"
			 start-year='2025'
			 :confirm-color="lightColor" 
			 :params='params'
			 @confirm="timeConfirm">
		</u-picker>
	</view>
</template>
<script>
	import tpl_banner from "@/pages/tabbar/roperty/template/tpl_banner"; 
	import { appSpecialMeals } from "@/api/food";
	export default {
		components: {
			carousel: tpl_banner
		},
		data(){
			return {
				timeValue:this.$u.date(new Date(), 'yyyy-mm-dd hh:MM'),
				params:{
					year: true,
					month: true,
					day: true,
				 	hour: true,
					minute: true,
					second: false,
					// 选择时间的时间戳
					timestamp: true,
				},
				username:'',
				phone:'',
				lightColor:'#499C43',
				//时间弹窗
				showPicker:false,
				chooseTime:'请选择',
			}
		},
		methods:{
			jump(res){
				uni.navigateTo({
					url: res
				});
			},
			/**
			 * 时间选择
			 */
			timeConfirm(res){
				this.chooseTime = res.year+'-'+res.month+'-'+res.day
			},
			submit(){
				if(this.chooseTime=='请选择'){
					uni.showToast({
						title: "选择日期！",
						icon: "none",
						duration: 1500,
					});
					return false
				}
				let data = {
					appDesc:this.appDesc,
					contacts:this.contacts,
					phone:this.phone,
					useMeal:this.chooseTime+' 00:00:00'
				}
				 appSpecialMeals(data).then(res=>{
					 uni.showToast({
					 	title: "申请成功！",
					 	icon: "none",
					 	duration: 1500,
					 });
					 setTimeout(()=>{
						 uni.reLaunch({
						 	url:'/pages/food/index'
						 })
					 },1000)
				 })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg-gray{
		padding-bottom: 35px;
	}
	.uni-input{
		text-align: right;
		font-size: 14px;
	}
	.apply{
		margin-top:25px;
	}
	.commonbg{
		padding: 12px 20px;
		border-radius: 12px;
		margin-bottom: 14px;
		.line{
			width: 4px;
			height: 16px;
			background-color: #499C43;
			margin-right: 5px;
		}
	}
	.boxitem{
		padding: 15px 10px;
		border-bottom: 1px solid #F6F6F6;
		.liuyan{
			border: 1px solid #F6F6F6;
			margin-top: 10px;
			padding: 10px;
		}
	}
	.boxitem:last-child{
		border:none;
	}
</style>